<template>
    <div class="page animate__animated animate__fadeIn">
        <el-card :bordered="false" shadow="never" class="ivu-mt" :body-style="{ padding: '16px 20px 0' }">
            <el-button type="success" size="small" icon="el-icon-plus" @click="addAdministrator()">新增</el-button>
            <el-table v-loading="isLoading" size="small" header-cell-class-name="table_header_cell" :data="list" class="table-mt">
                <el-table-column prop="id" label="管理员ID"> </el-table-column>
                <el-table-column prop="account" label="账户名称">
                    <template slot-scope="scope">
                        <p>
                            {{ scope.row.account }}
                            <el-tag type="success" size="mini" class="tip">{{
                                scope.row.role_name
                            }}</el-tag>
                        </p>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="姓名"> </el-table-column>
                <el-table-column prop="create_time" label="添加时间">
                </el-table-column>
                <el-table-column prop="status" label="账号状态">
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.status" active-value="1" inactive-value="2" @change="switchStatus(scope.row, $event)"></el-switch>
                    </template>
                </el-table-column>
                <el-table-column label="操作" fixed="right" width="200px">
                    <template slot-scope="scope">
                        <el-button type="text" @click="editAdministrator(scope.row)">编辑</el-button>
                        <el-button type="text" @click="delAdmin(scope.row.id)">删除</el-button>
                        <el-button type="text" @click="setPwd(scope.row.id)">修改登录密码</el-button>
                    </template>
                </el-table-column>
                <div slot="empty" class="empty">
                    <el-empty description="暂无数据" />
                </div>
            </el-table>
            <pagination v-if="total" :total="total" :page.sync="page" :limit.sync="limits" @pagination="getList" />
        </el-card>
        <add-administrator ref="addAdministrator" @reload="reload"></add-administrator>
        <edit-administrator ref="editAdministrator" @reload="reload" :scopeRow="scopeRow"></edit-administrator>
        <edit-pwd ref="editPwd"></edit-pwd>
    </div>
</template>

<script>
import {
    adminList,
    deleteAdmin,
    setAdminStatus,
} from "@/api/staff.js";
import addAdministrator from "./components/addAdministrator.vue";
import editAdministrator from "./components/editAdministrator.vue";
import editPwd from "./components/editPwd.vue";
export default {
    components: {
        addAdministrator,
        editAdministrator,
        editPwd,
    },
    data() {
        return {
            isLoading: false,
            list: [],
            treeList: [],
            scopeRow: {},
            page: 1,
            limits: 15,
            total: 0,
            handleType: 1,
        };
    },
    created() { },
    mounted() {
        this.getList();
    },
    methods: {
        addAdministrator() {
            this.handleType = 1;
            this.$refs.addAdministrator.add();
        },
        editAdministrator(row) {
            this.$refs.editAdministrator.add();
            this.handleType = 2;
            this.scopeRow = row ? row : {};
            console.log("this.scopeRow", this.scopeRow);
        },
        setPwd(id) {
            this.$refs.editPwd.show();
            this.$refs.editPwd.ruleForm.id = id;
        },
        switchStatus(row, e) {
            setAdminStatus({
                id: row.id,
                status: e,
            }).then((res) => {
                if (res.code == 0) {
                    this.$message({
                        message: res.msg,
                        type: "success",
                    });
                }
            });
        },
        reload() {
            // this.list = [];
            this.getList();
        },
        handleCurrentChange(obj) {
            console.log("obj", obj);
            this.page = obj.currentPage;
            this.getList();
        },
        getList() {
            this.isLoading = true;
            adminList({
                page: this.page,
                limits: this.limits,
            }).then((res) => {
                if (res.code == 0) {
                    this.list = res.data.data;
                    this.total = res.data.total;
                }
                this.isLoading = false;
            });
        },
        delAdmin(id) {
            this.$confirm("您确定要删除该管理员吗?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    deleteAdmin({
                        id: id,
                    }).then((res) => {
                        if (res.code == 0) {
                            this.$message({
                                message: res.msg,
                                type: "success",
                            });
                            this.reload();
                        }
                    });
                })
                .catch(() => { });
        },
    },
};
</script>

<style scoped>
.user-search {
    margin-top: 20px;
}

.userRole {
    width: 100%;
}
.table {
    margin-top: 20px;
}
</style>